<template>
  <div>
    <el-dialog :before-close="handleClose" title="查看客户详情" :visible.sync="dialogVisible" :fullscreen="fullscreen"
      width="60%" v-if="dialogVisible">
      <div slot="title" style="display: flex; justify-content: space-between;align-items: center;">
        <div>查看客户详情</div>
        <div style="margin-right: 30px; cursor: pointer;" @click="fullscreen = !fullscreen">
          <img style="width: 18px; height: 18px;" :src="!fullscreen
            ? require('../../../assets/icon/add.png')
            : require('../../../assets/icon/fix.png')
            " alt="" />
        </div>
      </div>
      <div class="dia-main" v-loading="Loading">
        <el-tabs>
          <el-tab-pane label="基本信息">
            <div class="fx">
              <div class="block f5bg">
                <div class="block-left">公司名称：</div>
                <div class="block-right">
                  {{
                    detailInfo.enterpriseInfo.taxpayerName != null
                      ? detailInfo.enterpriseInfo.taxpayerName
                      : "-"
                  }}
                </div>
              </div>
              <div class="block f5bg">
                <div class="block-left">所属省份：</div>
                <div class="block-right">
                  {{
                    detailInfo.enterpriseInfo.provinceName
                      ? detailInfo.enterpriseInfo.provinceName
                      : "-"
                  }}
                </div>
              </div>
            </div>
            <div class="fx">
              <div class="block">
                <div class="block-left">税务密码：</div>
                <div class="block-right">
                  {{
                    detailInfo.enterpriseInfo.password
                      ? detailInfo.enterpriseInfo.password
                      : "-"
                  }}
                </div>
              </div>
              <div class="block">
                <div class="block-left">税号：</div>
                <div class="block-right">
                  {{
                    detailInfo.enterpriseInfo.creditCode
                      ? detailInfo.enterpriseInfo.creditCode
                      : "-"
                  }}
                </div>
              </div>
            </div>
            <div class="fx">
              <div class="block f5bg">
                <div class="block-left">公司占比：</div>
                <div class="block-right">
                  {{
                    detailInfo.enterpriseInfo.legalPersonRatio
                      ? detailInfo.enterpriseInfo.legalPersonRatio
                      : "-"
                  }}
                </div>
              </div>
              <div class="block f5bg">
                <div class="block-left">法人：</div>
                <div class="block-right">
                  {{
                    detailInfo.enterpriseInfo.legalPerson
                      ? detailInfo.enterpriseInfo.legalPerson
                      : "-"
                  }}
                </div>
              </div>
            </div>
            <div class="fx">
              <div class="block">
                <div class="block-left">客户经理：</div>
                <div class="block-right">
                  {{
                    detailInfo.adminNickName ? detailInfo.adminNickName : "-"
                  }}
                </div>
              </div>
              <div class="block">
                <div class="block-left">联系方式：</div>
                <div class="block-right">
                  {{
                    detailInfo.enterpriseInfo.phone
                      ? detailInfo.enterpriseInfo.phone
                      : "-"
                  }}
                </div>
              </div>
            </div>
            <div class="fx">
              <div class="block f5bg">
                <div class="block-left">财务联系人：</div>
                <div class="block-right">
                  {{ detailInfo.financePhone ? detailInfo.financePhone : "-" }}
                </div>
              </div>
              <div class="block f5bg">
                <div class="block-left">企业注册日期：</div>
                <div class="block-right">
                  {{ detailInfo.registerTime ? detailInfo.registerTime : "-" }}
                </div>
              </div>
            </div>
            <div class="fx">
              <div class="block">
                <div class="block-left">一般户：</div>
                <div class="block-right">
                  {{
                    detailInfo.normalAccount ? detailInfo.normalAccount : "-"
                  }}
                </div>
              </div>
              <div class="block">
                <div class="block-left">基本户：</div>
                <div class="block-right">
                  {{ detailInfo.basicAccount ? detailInfo.basicAccount : "-" }}
                </div>
              </div>
            </div>
            <div v-for="(it, idx) in detailInfo.shareholderList" :key="idx">
              <div class="fx">
                <div class="block f5bg">
                  <div class="block-left">股东 {{ idx + 1 }}：</div>
                  <div class="block-right">
                    {{ it.realname ? it.realname : "-" }}
                  </div>
                </div>
                <div class="block f5bg">
                  <div class="block-left">公司占比：</div>
                  <div class="block-right">
                    {{ it.companyRatio ? it.companyRatio : "-" }}
                  </div>
                </div>
              </div>
              <div class="fx">
                <div class="block">
                  <div class="block-left">个人负债：</div>
                  <div class="block-right">
                    {{ it.personalDebt ? it.personalDebt : "-" }}
                  </div>
                </div>
                <div class="block">
                  <div class="block-left">联系方式：</div>
                  <div class="block-right">{{ it.phone ? it.phone : "-" }}</div>
                </div>
              </div>
            </div>
            <div class="fx">
              <div class="block f5bg">
                <div class="block-left">业务员：</div>
                <div class="block-right">
                  {{
                    detailInfo.userList
                      ? detailInfo.userList.map(v => v.adminName).join(", ")
                      : "-"
                  }}
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="批款信息">
            <div class="fx">
              <div class="block f5bg">
                <div class="block-left">产品名称：</div>
                <!-- <div class="block-right">{{ detailInfo.productList[0].name ? detailInfo.productList[0].name : "-" }}</div> -->
                <div class="block-right">
                  {{ detailInfo.productList | productFilter }}
                </div>
              </div>
            </div>
            <div class="fx">
              <div class="block">
                <div class="block-left">批款额度：</div>
                <div class="block-right">
                  {{
                    detailInfo.approvalQuota
                      ? `${detailInfo.approvalQuota}万元`
                      : "-"
                  }}
                </div>
              </div>
            </div>
            <div class="fx">
              <div class="block f5bg">
                <div class="block-left">批款日期：</div>
                <div class="block-right">
                  {{ detailInfo.approvalTime ? detailInfo.approvalTime : "-" }}
                </div>
              </div>
            </div>
            <div class="fx">
              <div class="block">
                <div class="block-left">批款方式：</div>
                <div class="block-right">
                  {{
                    detailInfo.approvalWay
                      ? detailInfo.approvalWay.join(",")
                      : "-"
                  }}
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="税票信息">
            <div class="table-box">
              <div class="title-msg">纳税信用</div>
              <el-table :data="detailInfo.creditEvaluationList || []" border style="">
                <el-table-column align="center" prop="evaluationYear" label="评价年度" />
                <el-table-column align="center" prop="evaluationScore" label="评价得分" />
                <el-table-column align="center" prop="evaluationResult" label="评价结果" />
              </el-table>
            </div>

            <div class="table-box">
              <div class="title-msg">开票金额</div>
              <el-table :data="applayInfoDataList" border style="">
                <el-table-column label="月份" align="center" prop="year"></el-table-column>
                <el-table-column label="1月" align="center" prop="1"></el-table-column>
                <el-table-column label="2月" align="center" prop="2"></el-table-column>
                <el-table-column label="3月" align="center" prop="3"></el-table-column>
                <el-table-column label="4月" align="center" prop="4"></el-table-column>
                <el-table-column label="5月" align="center" prop="5"></el-table-column>
                <el-table-column label="6月" align="center" prop="6"></el-table-column>
                <el-table-column label="7月" align="center" prop="7"></el-table-column>
                <el-table-column label="8月" align="center" prop="8"></el-table-column>
                <el-table-column label="9月" align="center" prop="9"></el-table-column>
                <el-table-column label="10月" align="center" prop="10"></el-table-column>
                <el-table-column label="11月" align="center" prop="11"></el-table-column>
                <el-table-column label="12月" align="center" prop="12"></el-table-column>
                <el-table-column label="合计" align="center" prop="add"></el-table-column>
              </el-table>
            </div>
            <div class="table-box">
              <div class="title-msg">纳税金额</div>
              <el-table :data="paidTaxesDataList" border style="">
                <el-table-column label="月份" align="center" prop="year"></el-table-column>
                <el-table-column label="1月" align="center" prop="1"></el-table-column>
                <el-table-column label="2月" align="center" prop="2"></el-table-column>
                <el-table-column label="3月" align="center" prop="3"></el-table-column>
                <el-table-column label="4月" align="center" prop="4"></el-table-column>
                <el-table-column label="5月" align="center" prop="5"></el-table-column>
                <el-table-column label="6月" align="center" prop="6"></el-table-column>
                <el-table-column label="7月" align="center" prop="7"></el-table-column>
                <el-table-column label="8月" align="center" prop="8"></el-table-column>
                <el-table-column label="9月" align="center" prop="9"></el-table-column>
                <el-table-column label="10月" align="center" prop="10"></el-table-column>
                <el-table-column label="11月" align="center" prop="11"></el-table-column>
                <el-table-column label="12月" align="center" prop="12"></el-table-column>
                <el-table-column label="合计" align="center" prop="add"></el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="补充信息">
            <div class="table-box">
              <!-- <div class="title-msg">补充信息</div> -->
              <div class="more-info">
                <div class="info-it">
                  <div>客户诉求：</div>
                  <div>
                    <p class="parsed-text">
                      {{ detailInfo.customerDemands }}
                    </p>
                  </div>
                </div>
              </div>
              <div class="more-info">
                <div class="info-it">
                  <div>情况概括：</div>
                  <div>
                    <p class="parsed-text">
                      {{ detailInfo.situationOverview }}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { monthUtil } from "@/utils/date";
import { getCompanyCustomerDetail } from "@/api/customer";
export default {
  name: "enterpriseDetail",
  filters: {
    productFilter(data) {
      if (data) {
        return data.map(item => item.name).join(",");
      } else {
        return "-";
      }
    }
  },
  data() {
    return {
      fullscreen: false,
      Loading: false,
      dialogVisible: false,
      detailInfo: {},
      applayInfoDataList: [],
      paidTaxesDataList: [],
      str:
        " 1、不能有当前逾期、人行征信五级分类异常、已到期未结清等;\n2、近6个月不能有2，近12个月不能有3，近24个月不能有;\n3、无贷款使用记录且当前无信用卡使用记录的不符合准入;\n4、最近6个月建议不出现15次及以上的信贷审批查询记录，且查询原因是“贷款审批”或“信用卡审批”;\n5、借款人本人、配偶、申报及名下企业在公开信息来源无刑事、失信、限高、涉及民间借贷案件等严重违法行为(含执行中和已结案);\n6、外部三方数据(非征信报告)近3个月查询次数越少越好;"
    };
  },
  methods: {
    // 打开弹框  查询详情接口
    opendialog(row) {
      this.Loading = true;
      getCompanyCustomerDetail(row.id)
        .then(async res => {
          this.paidTaxesDataList = res.data.paidTaxesDataList.map(v => {
            return {
              year: v.year,
              ...monthUtil(v.monthData),
              add: v.total
            };
          });
          this.applayInfoDataList = res.data.applayInfoDataList.map(v => {
            return {
              year: v.year,
              ...monthUtil(v.monthData),
              add: v.total
            };
          });
          if (res.data.approvalWay) {
            res.data.approvalWay = await this.$dictTypeFun(
              res.data.approvalWay,
              "approval_way_list"
            );
          } else {
            res.data.approvalWay = "";
          }

          this.detailInfo = res.data;
          this.Loading = false;
        })
        .finally(() => {
          this.Loading = false;
        });
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    }
  }
};
</script>

<style scoped lang="scss">
/deep/ .el-dialog__body {
  padding: 0 20px;
}

.dia-main {
  overflow-y: auto;
  height: 70vh;
}

p {
  margin: 0;
  padding: 0;
}

.f5bg {
  background: #f5f5f5;
}

.dialog-box {
  min-height: 500px;
}

.fx {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;

  .block {
    width: 48%;
    display: flex;
    align-items: center;
    max-height: 56px;
    padding: 15px 0;

    //line-height: 56px;
    .block-left {
      display: inline-block;
      //display: flex;
      text-align: right;
      width: 30%;
    }

    .block-right {
      display: inline-block;
      //display: flex;
      line-height: 18px;
      color: #222;
      width: 60%;
    }
  }
}

.table-box {
  margin-bottom: 10px;

  .title-msg {
    font-size: 14px;
    font-weight: bold;
    color: #000;
    margin-bottom: 10px;
  }

  .more-info {
    margin-bottom: 10px;

    .info-it {
      display: flex;
      align-items: baseline;
      width: 100%;

      >div {
        color: #222;
        white-space: nowrap;

        &:nth-child(1) {
          width: 6%;
          margin-right: 10px;
        }

        &:nth-child(2) {
          font-size: 12px;
          width: 80%;
          padding: 0 10px;
          border-radius: 8px;
          background-color: #f5f5f5;
          line-height: 20px;
          border: 1px solid #eeeeee;
        }
      }
    }
  }
}

.parsed-text {
  white-space: pre-line;
  /* 保留换行 */
  margin-bottom: 20px;
  line-height: 20px;
}
</style>
